<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        line-height: 500px;
      }
    </style>
  </head>

  <body>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <img data-src="./test.png" alt="" width="200px" height="200px" />
    <img data-src="./test.png" alt="" width="200px" height="200px" />
    <img data-src="./test.png" alt="" width="200px" height="200px" />
    <p>a</p>
  </body>
  <script>
    // top： 元素上边到视窗上边的距离;
    // right： 元素右边到视窗左边的距离;
    // bottom： 元素下边到视窗上边的距离;
    // left： 元素左边到视窗左边的距离;
    // const images = document.querySelectorAll('img')
    // let timer = null
    // window.addEventListener('scroll', (e) => {
    //     timer ? clearTimeout(timer) : "'"
    //     timer = setTimeout(() => {
    //         images.forEach(image => {
    //             const imageTop = image.getBoundingClientRect().top
    //             if (imageTop < window.innerHeight) { //innerHeight 返回窗口的文档显示区的高度。
    //                 const dara_src = image.getAttribute('data-src')
    //                 image.setAttribute('src', dara_src)
    //             }
    //         })
    //     }, 2000);
    // })

    // 观察一个元素是否在视窗可见  IntersectionObserver   有兼容性
    const images = document.querySelectorAll('img');
    const callback = (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const image = entry.target;
          const data_src = image.getAttribute('data-src');
          image.setAttribute('src', data_src);
          observer.unobserve(image); //unobserve(element) 停止观察 接受一个element元素 disconnect关闭观察
        }
      });
    };
    const observer = new IntersectionObserver(); //两个参数 callback是当元素的可见性变化时候的回调函数，options是一些配置项（可选）。
    // const options = {
    //     root: document.querySelector('.box'),//必须是指定元素的子元素 ，默认是null
    //      threshold: [0, 0.5, 1], //用来指定交叉比例，决定什么时候触发回调函数，是一个数组，默认是[0],0.5，1，当观察元素img0%、50%、100%
    //     rootMargin: '30px 100px 20px'//增加范围 左 上下 右
    // }
    images.forEach((image) => {
      observer.observe(image);
    });
  </script>
</html>
